<template>
  <div class="main">
    <div class="main_left">
      <div class="main_left_top">
        <div class="">
          <img class="companyImg" src="../assets/images/home3D.png" alt="勤诚达" />
          <div>
            <div class="hotelName">勤诚达</div>
            <div class="buildNum">
              <!-- <span class="el-icon-office-building"></span> -->
              <span> 总建筑面积： 870000 ㎡</span>
            </div>
            <div class="staffNum">
              <div>
                <div class="buillogo">
                  <img src="../assets/images/house.png" alt="" />
                  <span>t1</span>
                </div>
                <div class="buildata">
                  <div>层数： 33 层</div>
                  <div>总建筑面积： 3680 ㎡</div>
                </div>
              </div>
            </div>
            <div class="staffNum">
              <div>
                <div class="buillogo">
                  <img src="../assets/images/house.png" width="25" alt="" />
                  <span>t2</span>
                </div>
                <div class="buildata">
                  <div>层数： 33 层</div>
                  <div>总建筑面积： 3188 ㎡</div>
                </div>
              </div>
            </div>
            <div class="staffNum">
              <div>
                <div class="buillogo">
                  <img src="../assets/images/house.png" width="25" alt="" />
                  <span>t3</span>
                </div>
                <div class="buildata">
                  <div>层数： 33 层</div>
                  <div>总建筑面积： 3188 ㎡</div>
                </div>
              </div>
            </div>

            <div id="fy_hotel"></div>
          </div>
        </div>
        <div>
          <div>
            <div class="hotelName">设备总数</div>
            <div class="devNumEcharts">
              <div>
                <div class="sumContainer">
                  <div class="wave">
                    <span v-if="totalNum">{{totalNum}}</span>
                  </div>
                </div>
              </div>
              <div id="onlineDevice"></div>
              <div id="offlineDevice"></div>
              <div id="warnDevice"></div>
            </div>
            <div class="devTitle">
              <div>总设备</div>
              <div>在线设备</div>
              <div>离线设备</div>
              <div>报警设备</div>
            </div>
          </div>
        </div>
      </div>
      <div class="main_left_bottom">
        <div>
          <div class="nfkt">
            <div class="hotelName">
              <div class="biaodian"></div>
              <span>进出记录</span>
            </div>
            <el-table :header-cell-style="{
                background: '#007674',
                color: '#fff',
                hight: '35px'
              }" size="mini" :data="tableData" :cell-style="tableStyle" stripe height="450"
              style="width: 100%;margin-top: 10px;">

              <el-table-column prop="doorName" label="设备名称" align="center"></el-table-column>
              <el-table-column prop="typeDesc" label="开门类型" align="center"></el-table-column>
              <el-table-column prop="userName" label="用户姓名" align="center"></el-table-column>
              <el-table-column prop="" label="开门时间" align="center">
                <template slot-scope="scope" v-if="scope.row.openDateTime">
                    {{ formatDate(scope.row.openDateTime) }}
                </template>
              </el-table-column>

            </el-table>
          </div>
          <!-- <div class="cbxttccxt">
            <div class="cbxt">
              <div class="hotelName">
                <div class="biaodian"></div>
                <span>能耗管理</span>
              </div>
              <div class="box_content">
                <div>
                  <img src="../assets/images/meterReading.png" alt="" />
                </div>
                <div>
                  <div><span>离线设备数</span> <span
                      v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[14].offlineNum}}</span></div>
                  <div><span>报警设备数</span> <span
                      v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[14].alarmNum}}</span></div>
                  <div><span>监测设备数</span> <span
                      v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[14].totalNum}}</span></div>
                </div>
              </div>
            </div>
            <div class="tccgl">
              <div class="hotelName">
                <div class="biaodian"></div>
                <span>停车场管理</span>
              </div>
              <div class="box_content">
                <div>
                  <img src="../assets/images/park.png" alt="" />
                </div>
                <div>
                  <div><span>离线设备数</span> <span
                      v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[14].offlineNum}}</span></div>
                  <div><span>报警设备数</span> <span
                      v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[14].alarmNum}}</span></div>
                  <div><span>监测设备数</span> <span
                      v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[14].totalNum}}</span></div>
                </div>
              </div>
            </div>
          </div>
          <div class="cbxttccxt">
            <div class="xfxt">
              <div class="hotelName">
                <div class="biaodian"></div>
                <span>火灾报警</span>
              </div>
              <div class="box_content">
                <div>
                  <img src="../assets/images/firecontrol.png" alt="" />
                </div>
                <div>
                  <div><span>离线设备数</span> <span
                      v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[14].offlineNum}}</span></div>
                  <div><span>报警设备数</span> <span
                      v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[14].alarmNum}}</span></div>
                  <div><span>监测设备数</span> <span
                      v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[14].totalNum}}</span></div>
                </div>
              </div>
            </div>
            <div class="xfrq">
              <div class="hotelName">
                <div class="biaodian"></div>
                <span>入侵报警</span>
              </div>
              <div class="box_content">
                <div>
                  <img src="../assets/images/protect.png" alt="" />
                </div>
                <div>
                  <div><span>离线设备数</span> <span
                      v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[13].offlineNum}}</span></div>
                  <div><span>报警设备数</span> <span
                      v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[13].alarmNum}}</span></div>
                  <div><span>监测设备数</span> <span
                      v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[13].totalNum}}</span></div>
                </div>
              </div>
            </div>
          </div> -->
        </div>
        <div>
          <div class="oneline" style="display: flex;">
            <div class="xiaobox">

              <div class="jkxt boxcopy">
                <div class="hotelName">
                  <div class="biaodian"></div>
                  <span>视频监控</span>
                </div>
                <div class="box_content">
                  <div>
                    <img src="../assets/images/monitoring.png" alt="" />
                  </div>
                  <div>
                    <div><span>离线设备数</span> <span
                        v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[0].offlineNum}}</span></div>
                    <div><span>报警设备数</span> <span
                        v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[0].alarmNum}}</span></div>
                    <div><span>监测设备数</span> <span
                        v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[0].totalNum}}</span></div>
                  </div>
                </div>
              </div>

              <div class="dtzm">
                <div class="hotelName">
                  <div class="biaodian"></div>
                  <span>门禁系统</span>
                </div>
                <div class="box_content">
                  <div>
                    <img src="../assets/images/protect.png" alt="" />
                  </div>
                  <div>
                    <div><span>离线设备数</span> <span
                        v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[3].offlineNum}}</span></div>
                    <div><span>报警设备数</span> <span
                        v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[3].alarmNum}}</span></div>
                    <div><span>监测设备数</span> <span
                        v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[3].totalNum}}</span></div>
                  </div>
                </div>
              </div>

            </div>
            <!-- <div class="gpsxt">
              <div class="hotelName">
                <div class="biaodian"></div>
                <span>给排水系统</span>
              </div>
              <div class="box_content geipaishui">
                <div>
                  <img src="../assets/images/logo.png" alt="" />
                </div>
                <div>
                  <div><span>报警水池数</span> <span>0</span></div>
                  <div><span>报警水箱数</span> <span>34</span></div>
                  <div><span>排水管开启</span> <span>3</span></div>
                  <div><span>给水管开启</span> <span>34</span></div>
                  <div><span>报警给水管</span> <span>1</span></div>
                  <div><span>监测排水管</span> <span>11</span></div>
                  <div><span>监测给水管</span> <span>13</span></div>
                </div>
              </div>
            </div> -->
            <!-- <div class="xiaobox">

              <div class="lczm boxcopy">
                <div class="hotelName">
                  <div class="biaodian"></div>
                  <span>对讲系统</span>
                </div>
                <div class="box_content">
                  <div>
                    <img src="../assets/images/help.png" alt="" />
                  </div>
                  <div>
                    <div><span>离线设备数</span> <span
                        v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[11].offlineNum}}</span></div>
                    <div><span>报警设备数</span> <span
                        v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[11].alarmNum}}</span></div>
                    <div><span>监测设备数</span> <span
                        v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[11].totalNum}}</span></div>
                  </div>
                </div>
              </div>

              <div class="lczm">
                <div class="hotelName">
                  <div class="biaodian"></div>
                  <span>烟感报警系统</span>
                </div>
                <div class="box_content">
                  <div>
                    <img src="../assets/images/zhaoming.png" alt="" />
                  </div>
                  <div>
                    <div><span>离线设备数</span> <span
                        v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[5].offlineNum}}</span></div>
                    <div><span>报警设备数</span> <span
                        v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[5].alarmNum}}</span></div>
                    <div><span>监测设备数</span> <span
                        v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[5].totalNum}}</span></div>
                  </div>
                </div>
              </div>
            </div> -->

            <div class="xiaobox">

              <div class="gpfxt boxcopy">
                <div class="hotelName">
                  <div class="biaodian"></div>
                  <span>停车场管理系统</span>
                </div>
                <div class="box_content">
                  <div>
                    <img src="../assets/images/park.png" alt="" />
                  </div>
                  <div>
                    <div><span>离线设备数</span> <span
                        v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[1].offlineNum}}</span></div>
                    <div><span>报警设备数</span> <span
                        v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[1].alarmNum}}</span></div>
                    <div><span>监测设备数</span> <span
                        v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[1].totalNum}}</span></div>
                  </div>
                </div>
              </div>
              
              <div class="gpfxt boxcopy">
                <div class="hotelName">
                  <div class="biaodian"></div>
                  <span>广播系统</span>
                </div>
                <div class="box_content">
                  <div>
                    <img src="../assets/images/electricity.png" alt="" />
                  </div>
                  <div>
                    <div><span>离线设备数</span> <span
                        v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[2].offlineNum}}</span></div>
                    <div><span>报警设备数</span> <span
                        v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[2].alarmNum}}</span></div>
                    <div><span>监测设备数</span> <span
                        v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[2].totalNum}}</span></div>
                  </div>
                </div>
              </div>

            </div>
          </div>
          <div class="twoline">
            <!-- <div class="dljk">
              <div class="hotelName">
                <div class="biaodian"></div>
                <span>泳池系统</span>
              </div>
              <div class="box_content">
                <div>
                  <img src="../assets/images/electricity.png" alt="" />
                </div>
                <div>
                  <div><span>离线设备数</span> <span
                      v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[10].offlineNum}}</span></div>
                  <div><span>报警设备数</span> <span
                      v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[10].alarmNum}}</span></div>
                  <div><span>监测设备数</span> <span
                      v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[10].totalNum}}</span></div>
                </div>
              </div>
            </div>
            <div class="dljk">
              <div class="hotelName">
                <div class="biaodian"></div>
                <span>电梯监测</span>
              </div>
              <div class="box_content">
                <div>
                  <img src="../assets/images/elevator.png" alt="" />
                </div>
                <div>
                  <div><span>离线设备数</span> <span
                      v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[8].offlineNum}}</span></div>
                  <div><span>报警设备数</span> <span
                      v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[8].alarmNum}}</span></div>
                  <div><span>监测设备数</span> <span
                      v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[8].totalNum}}</span></div>
                </div>
              </div>
            </div> -->
            <!-- <div class="dtgl">
              <div class="hotelName">
                <div class="biaodian"></div>
                <span>电梯管理</span>
              </div>
              <div class="box_content">
                <div>
                  <img src="../assets/images/elevator.png" alt="" />
                </div>
                <div>
                  <div><span>报警轿箱</span> <span>2</span></div>
                  <div><span>监测轿箱</span> <span>354</span></div>
                </div>
                <div class="elevator">
                  <div>
                    <div class="top_triangle"></div>
                    <span class="elevatorspan">上行数</span> <span>342</span>
                  </div>
                  <div>
                    <div class="below_triangle"></div>
                    <span class="elevatorspan">下行数</span> <span>2</span>
                  </div>
                  <div>
                    <div class="stop1"></div>
                    <div class="stop2"></div>
                    <span class="elevatorspan">暂停数</span> <span>354</span>
                  </div>
                </div>
              </div>
            </div> -->
            <!-- <div class="dljk">
              <div class="hotelName">
                <div class="biaodian"></div>
                <span>电力监测</span>
              </div>
              <div class="box_content">
                <div>
                  <img src="../assets/images/electricity.png" alt="" />
                </div>
                <div>
                  <div><span>离线设备数</span> <span
                      v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[4].offlineNum}}</span></div>
                  <div><span>报警设备数</span> <span
                      v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[4].alarmNum}}</span></div>
                  <div><span>监测设备数</span> <span
                      v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[4].totalNum}}</span></div>
                </div>
              </div>
            </div> -->
          </div>
          <!-- <div class="threeline">
            <div class="mjgl">
              <div class="hotelName">
                <div class="biaodian"></div>
                <span>门禁管理</span>
              </div>
              <div class="box_content">
                <div>
                  <img src="../assets/images/entranceGuard.png" alt="" />
                </div>
                <div>
                  <div><span>离线设备数</span> <span
                      v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[7].offlineNum}}</span></div>
                  <div><span>报警设备数</span> <span
                      v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[7].alarmNum}}</span></div>
                  <div><span>监测设备数</span> <span
                      v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[7].totalNum}}</span></div>
                </div>
              </div>
            </div>
            <div class="jjqj">
              <div class="hotelName">
                <div class="biaodian"></div>
                <span>信息发布</span>
              </div>
              <div class="box_content">
                <div>
                  <img src="../assets/images/help.png" alt="" />
                </div>
                <div>
                  <div><span>离线设备数</span> <span
                      v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[12].offlineNum}}</span></div>
                  <div><span>报警设备数</span> <span
                      v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[12].alarmNum}}</span></div>
                  <div><span>监测设备数</span> <span
                      v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[12].totalNum}}</span></div>
                </div>
              </div>
            </div>
            <div class="kqzl">
              <div class="hotelName">
                <div class="biaodian"></div>
                <span>计算机网络</span>
              </div>
              <div class="box_content">
                <div>
                  <img src="../assets/images/airQuality.png" alt="" />
                </div>
                <div>
                  <div><span>离线设备数</span> <span
                      v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[15].offlineNum}}</span></div>
                  <div><span>报警设备数</span> <span
                      v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[15].alarmNum}}</span></div>
                  <div><span>监测设备数</span> <span
                      v-if="statisticsDeviceList.length>0">{{statisticsDeviceList[15].totalNum}}</span></div>
                </div>
              </div>
            </div>
          </div> -->
        </div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="main_right">
      <img src="" alt="" />
      <div class="hotelName">实时报警</div>
      <div id="real_time"></div>
      <div>
        <span :class="[isActive == 1 ? 'isActive' : 'blurActive']" @click="isActive = 1">未处理</span>
        <span :class="[isActive == 2 ? 'isActive' : 'blurActive']" @click="isActive = 2">已处理</span>
      </div>
      <div class="warningInfo" @mouseenter.stop.prevent="enterHandle" @mouseleave.stop.prevent="leaveHandle">
        <!-- <div v-if="!isMouseEnter && isScrollBigParentEl" class="warningScroll" ref="warningScroll"
          :style="{ animationDuration: scrollDuration }"> -->
        <div class="warningScroll" ref="warningScroll"
          :style="{ animationDuration: scrollDuration }">
          <template v-if="isActive == 1">
            <div class="warn_item" v-for="(item, index) in real_timeList.handledAlarm" :key="index"
              :class="{ isWarnActive: isWarnActive == item }" @click="isWarnActive = item,location(item)">
              <div style="display: flex;">
                <img :src="
                    item % 2 == 0
                      ? baojingimg.img2
                      : item % 3 == 0
                      ? baojingimg.img3
                      : baojingimg.img1
                  " width="37" alt="" />
                <div style="margin-left: 10px;">
                  <div class="warnDetail">{{ item.title }}</div>
                  <div class="warnDate">{{ item.alarmTime }}</div>
                </div>
              </div>
              <div class="locationc">{{ item.location }}</div>
            </div>
          </template>
          <template v-else-if="isActive == 2">
            <div class="warn_item" v-for="(item, index) in real_timeList.unhandledAlarm" :key="index"
              :class="{ isWarnActive: isWarnActive == item }" @click="isWarnActive = item,location(item)">
              <img :src="
                  item % 2 == 0
                    ? baojingimg.img2
                    : item % 3 == 0
                    ? baojingimg.img3
                    : baojingimg.img1
                " width="37" alt="" />
              <div>
                <div class="warnDetail">{{ item.title }}</div>
                <div class="warnDate">{{ item.alarmTime }}</div>
              </div>
              <div>{{ item.location }}</div>
            </div>
          </template>
        </div>

        <!-- <div class="warningScroll2" ref="warningScroll2" v-else>
          <template v-if="isActive == 1">
            <div class="warn_item" v-for="(item, index) in real_timeList.handledAlarm" :key="index"
              :class="{ isWarnActive: isWarnActive == item }" @click="isWarnActive = item,location(item)">
              <div style="display: flex;">
                <img :src="
                    item % 2 == 0
                      ? baojingimg.img2
                      : item % 3 == 0
                      ? baojingimg.img3
                      : baojingimg.img1
                  " width="37" alt="" />
                <div style="margin-left: 10px;">
                  <div class="warnDetail">{{ item.type }}</div>
                  <div class="warnDate">{{ item.originTime }}</div>
                </div>
              </div>
              <div class="locationc">{{ item.deviceName }}</div>
            </div>
          </template>
          <template v-else-if="isActive == 2">
            <div class="warn_item" v-for="(item, index) in real_timeList.unhandledAlarm" :key="index"
              :class="{ isWarnActive: isWarnActive == item }" @click="isWarnActive = item,location(item)">
              <img :src="
                  item % 2 == 0
                    ? baojingimg.img2
                    : item % 3 == 0
                    ? baojingimg.img3
                    : baojingimg.img1
                " width="37" alt="" />
              <div>
                <div class="warnDetail">{{ item.type}}</div>
                <div class="warnDate">{{ item.originTime}}</div>
              </div>
              <div>{{ item.deviceName }}</div>
            </div>
          </template>
        </div> -->

        <!-- <div style="text-align:center;" v-show="isActive==2">
                    暂无数据
                </div> -->
      </div>
    </div>
  </div>
</template>

<script>
  import { getDateArray } from "../util/util";
  import { eventDevice, spaceDeviceInfo, statisticsDevice, statisticsDeviceSummary,getInsertDoorLog } from "../url/api";
  import * as echarts from "echarts";
  export default {
    data() {
      return {
        optionnoe: {
          series: [
            {
              type: "gauge",
              startAngle: 90,
              endAngle: -270,
              pointer: {
                show: false
              },
              min: 0,
              max: 562,
              progress: {
                show: true,
                overlap: false,
                roundCap: true,
                clip: false
                // itemStyle: {
                //     borderWidth: 1,
                //     borderColor: '#464646'
                // }
              },
              color: ["#76daff"],
              axisLine: {
                lineStyle: {
                  width: 6
                }
              },
              splitLine: {
                show: false,
                distance: 0,
                length: 10
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false,
                distance: 50
              },
              data: [
                {
                  value: 0,
                  // name: 'Perfect',
                  title: {
                    offsetCenter: ["0%", "-30%"]
                  },
                  detail: {
                    valueAnimation: true,
                    offsetCenter: ["0%", "-20%"]
                  }
                },
                // {
                //   value: 4500,
                //   // name: 'Perfect',
                //   title: {
                //     offsetCenter: ["0%", "-30%"]
                //   },
                //   detail: {
                //     valueAnimation: true,
                //     offsetCenter: ["0%", "-20%"]
                //   }
                // }
              ],
              title: {
                fontSize: 14
              },
              detail: {
                width: 20,
                height: 20,
                fontSize: 14,
                color: "auto",
                borderColor: "auto",
                // borderRadius: 20,
                // borderWidth: 1,
                formatter: "{value}"
              }
            }
          ]
        },
        offlineDevice: {
          series: [
            {
              type: "gauge",
              startAngle: 90,
              endAngle: -270,
              pointer: {
                show: false
              },
              min: 0,
              max: 562,
              progress: {
                show: true,
                overlap: false,
                roundCap: true,
                clip: false
                // itemStyle: {
                //     borderWidth: 1,
                //     borderColor: '#464646'
                // }
              },
              color: ["#76daff"],
              axisLine: {
                lineStyle: {
                  width: 6
                }
              },
              splitLine: {
                show: false,
                distance: 0,
                length: 10
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false,
                distance: 50
              },
              data: [
                {
                  value: 0,
                  // name: 'Perfect',
                  title: {
                    offsetCenter: ["0%", "-30%"]
                  },
                  detail: {
                    valueAnimation: true,
                    offsetCenter: ["0%", "-20%"]
                  }
                }
              ],
              title: {
                fontSize: 14
              },
              detail: {
                width: 20,
                height: 20,
                fontSize: 14,
                color: "auto",
                borderColor: "auto",
                // borderRadius: 20,
                // borderWidth: 1,
                formatter: "{value}"
              }
            }
          ]
        },
        warnDevice: {
          series: [
            {
              type: "gauge",
              startAngle: 90,
              endAngle: -270,
              min: 0,
              max: 562,
              pointer: {
                show: false
              },
              progress: {
                show: true,
                overlap: false,
                roundCap: true,
                clip: false
                // itemStyle: {
                //     borderWidth: 1,
                //     borderColor: '#464646'
                // }
              },
              color: ["#76daff"],
              axisLine: {
                lineStyle: {
                  width: 6
                }
              },
              splitLine: {
                show: false,
                distance: 0,
                length: 10
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false,
                distance: 50
              },
              data: [
                {
                  value: 0,
                  // name: 'Perfect',
                  title: {
                    offsetCenter: ["0%", "-30%"]
                  },
                  detail: {
                    valueAnimation: true,
                    offsetCenter: ["0%", "-20%"]
                  }
                }
              ],
              title: {
                fontSize: 14
              },
              detail: {
                width: 20,
                height: 20,
                fontSize: 14,
                color: "auto",
                borderColor: "auto",
                // borderRadius: 20,
                // borderWidth: 1,
                formatter: "{value}"
              }
            }
          ]
        },
        real_timeList: {
          handledAlarm: [],
          unhandledAlarm: []
        },
        isActive: 1,
        isWarnActive: 1,
        baojingimg: {
          img1: require("../assets/images/baojing1.png"),
          img2: require("../assets/images/baojing2.png"),
          img3: require("../assets/images/baojing3.png")
        },
        tableData: [
        ],
        scrollDuration: "25s",
        isMouseEnter: false,
        // 滚动的盒子高度是否大于父元素的高度
        isScrollBigParentEl: true,
        systemTypeList: [
          {
            "id": 1,
            "systemType": "视频监控系统",
            "keyId": "iot_vscs"
          },
          {
            "id": 2,
            "systemType": "停车场管理系统",
            "keyId": "iot_cps"
          },
          {
            "id": 3,
            "systemType": "广播系统",
            "keyId": "iot_dmb"
          },
          {
            "id": 4,
            "systemType": "门禁系统",
            "keyId": "iot_acs"
          },

        ],
        statisticsDeviceList: [],
        statisticsDeviceSum: '',
        totalNum:0,
        onlineNum:0,
        outlineNum:0,
        alarmNum:0,
      };
    },
    methods: {
      getList(){
            let params = {
                  current:1,
                  size:12,
            }
            getInsertDoorLog(params).then((res) => {
                        if (res.data.ok) {
                            this.tableData = res.data.data.records
                            this.total = res.data.data.total
                        }
                    });
        },
        formatDate(time) {
          if (time.length < 6) {
            time.push(0); // 当时间秒为00时，后端只会返回五个数字，所以往数组末尾添加默认值 0
          }
            const [year, month, day, hour, minute, second] = time;
            const formattedDate = `${year}-${this.padZero(month)}-${this.padZero(day)}`;
            const formattedTime = `${this.padZero(hour)}:${this.padZero(minute)}:${this.padZero(second)}`;
            return `${formattedDate} ${formattedTime}`;
        },
        padZero(num) {
        return num.toString().padStart(2, '0');
        },      getstatisticsDevice() {
        let params = {
          projectId: '',
          subsystemCode: [],
        }
        this.systemTypeList.filter((item) => {
          params.subsystemCode.push(item.keyId);
        });
        console.log(params);
        statisticsDevice(params).then(res => {
          console.log(res);
          if (res.data.ok) {
            this.statisticsDeviceList = res.data.data;
            this.getstatisticsDeviceSummary();
            // let dataobj = {
            //   name: "一栋门禁",
            //   count: this.statisticsDeviceList.length > 0 ? this.statisticsDeviceList[0].totalNum : '出',
            //   yunxing: this.statisticsDeviceList.length > 0 ? this.statisticsDeviceList[0].onlineNum : '2023-05-13 15:22:51',
            //   bj: this.statisticsDeviceList.length > 0 ? this.statisticsDeviceList[0].alarmNum : '二维码'
            // }
            let dataobj = [{
              name: "一栋门禁",
              count: '出',
              yunxing: '2023-05-13 15:22:51',
              bj: '--'
            },{
              name: "一栋门禁",
              count: '入',
              yunxing: '2023-05-13 15:22:51',
              bj: '二维码'
            },{
              name: "一栋门禁",
              count: '入',
              yunxing: '2023-05-13 15:22:51',
              bj: '二维码'
            },{
              name: "一栋门禁",
              count: '入',
              yunxing: '2023-05-13 15:22:51',
              bj: '一键开门'
            },{
              name: "一栋门禁",
              count: '出',
              yunxing: '2023-05-13 15:22:51',
              bj: '--'
            },{
              name: "一栋门禁",
              count: '出',
              yunxing: '2023-05-13 15:22:51',
              bj: '--'
            }]
            // this.tableData= dataobj;
            // console.log(this.tableData);
            // this.total = res.data.data.total;
          } else {
            // this.$message(res.data.msg);
          }
        });
      },
      getstatisticsDeviceSummary() {
        // let params = {
        //   projectId: '',
        //   subsystemCode: [],
        // }
        // statisticsDeviceSummary(params).then(res => {
        //   console.log(res);
        //   if (res.data.ok) {
            // debugger
            // this.statisticsDeviceSum = res.data.data;
            // this.optionnoe.series[0].max = this.statisticsDeviceSum.totalNum;
            // this.offlineDevice.series[0].max = this.statisticsDeviceSum.totalNum;
            // this.warnDevice.series[0].max = this.statisticsDeviceSum.totalNum;
            console.log(this.statisticsDeviceList);
            this.statisticsDeviceList.forEach(item=>{
              this.totalNum += item.totalNum
              this.outlineNum += item.offlineNum
              this.alarmNum += item.alarmNum
            })
            this.onlineNum = this.totalNum - this.outlineNum
            console.log(this.totalNum);
            this.statisticsDeviceSum = this.totalNum;
            this.optionnoe.series[0].max = this.totalNum;
            this.offlineDevice.series[0].max = this.totalNum;
            this.warnDevice.series[0].max = this.totalNum;
            // debugger
            this.$set(this.optionnoe.series[0].data[0], 'value', this.onlineNum);
            this.offlineDevice.series[0].data[0].value = this.outlineNum;
            this.warnDevice.series[0].data[0].value = this.alarmNum;
            this.renderEcharts(
              'onlineDevice',
              this.optionnoe
            );
            this.renderEcharts(
              'offlineDevice',
              this.offlineDevice
            );
            this.renderEcharts(
              'warnDevice',
              this.warnDevice
            );
            // console.log(0);
            // this.$forceUpdate();
        //   } else {
        //     // this.$message(res.data.msg);
        //   }
        // });
      },
      //报警定位
      location(row) {
        console.log(row, "WWWWWWWWWWWWWWW");
        let data = null;
        let params = {
          subsystemCode: row.subsystemCode,
          deviceId: row.deviceId,
        }
        spaceDeviceInfo(params).then(res => {
          //项目选择列表~
          console.log(res, "WQWQWQWQQWQWQWQWQ");
          if (res.data.ok) {
            data = res.data.data;
          }
          // debugger
          this.$router.push({
            path: "/" + row.subsystemCode,
            query: {
              rowData: data,
            },
          });
        });
      },
      /* 渲染echarts */
      renderEcharts() {
        let myChart1 = echarts.init(document.getElementById("onlineDevice"));
        myChart1.setOption(this.optionnoe);
        let myChart2 = echarts.init(document.getElementById("offlineDevice"));
        myChart2.setOption(this.offlineDevice);
        let myChart3 = echarts.init(document.getElementById("warnDevice"));
        myChart3.setOption(this.warnDevice);
      },
      tableStyle({ row, column, rowIndex, columnIndex }) {
        //console.log("行数：",rowIndex);
        if ((rowIndex * 1 + 1) % 2 == 0) {
          return "background: #CCCCCC;color:#000";
        } else {
          return "background: #EEEEEE;color:#000";
        }
      },
      // 生成滚动假数据函数
      scrollAlarmList() {
        for (let i = 1; i <= 150; i++) {
          const data = {
            title: "给排水二级报警",
            alarmTime: "2023-11-07",
            location: "地址F1"
          };
          data.title = "给排水二级报警" + i;
          this.real_timeList.handledAlarm.push(data);
        }
        let params = {
          page: {
            current: 1,
            endTime: '',
            size: 30,
            startTime: ''
          },
        }
        eventDevice(params).then(res => {
          console.log(res);
          if (res.data.ok) {
            this.real_timeList.handledAlarm = res.data.data.records.filter(item => {
              if (item.originTime) {
                item.originTime = this.$root.getDateArray(item.createTime)[9];
              }
              return item;
            });
            // this.total = res.data.data.total;
          } else {
            // this.$message(res.data.msg);
          }
        });
        this.isScrollBigParentElFn();
      },

      // 判断是否需要滚动的函数
      isScrollBigParentElFn() {
        this.$nextTick(() => {
          const height = this.$refs.warningScroll.offsetHeight;
          console.log(height);
          // 13条数据刚好多滚动一条数据 高为865
          if (height < 865) {
            this.isScrollBigParentEl = false;
          } else {
            this.real_timeList.handledAlarm = this.real_timeList.handledAlarm.concat(
              [...this.real_timeList.handledAlarm]
            );
            this.scrollDuration = this.real_timeList.handledAlarm.length + "s";
          }
        });
      },

      // 滚动列表鼠标进入事件
      enterHandle() {
        // 为了无概率重复触发鼠标进入事件而导致重复减少数组长度
        if (this.isMouseEnter) return;
        // 如果不需要滚动时 不触发
        if (!this.isScrollBigParentEl) return;
        this.isMouseEnter = true;
        const length = this.real_timeList.handledAlarm.length;
        this.real_timeList.handledAlarm.length = length - length / 2;
        //   console.log("出发了进入", this.real_timeList.handledAlarm.length);
      },

      // 滚动列表鼠标移开事件
      leaveHandle() {
        if (!this.isMouseEnter) return;
        // 如果不需要滚动时 不触发
        if (!this.isScrollBigParentEl) return;
        this.isMouseEnter = false;
        this.real_timeList.handledAlarm = this.real_timeList.handledAlarm.concat([
          ...this.real_timeList.handledAlarm
        ]);
        //   console.log("出发了离开", this.real_timeList.handledAlarm.length);
      },
      init() {
        // debugger
        this.$nextTick(() => {
          this.getstatisticsDevice();
          this.getstatisticsDeviceSummary();
        });

      },
    },
    mounted() {
      this.getList()
      this.renderEcharts();
      // this.getEquipment();
      this.scrollAlarmList();
      this.init();
    },
    updated() { }
  };
</script>

<style scoped lang="scss">
  .main {
    display: flex;
    width: 100%;
    height: auto;
    font-size: 16px;
    background: #eeeeee;
    padding: 5px 0px;
  }

  .main_left {
    width: 1260px;
    height: 100%;
    position: relative;
    margin-bottom: 15px;
  }

  .main_left_top {
    height: 262px;
    display: flex;
  }

  .main_left .main_left_top>div:nth-child(1) {
    width: 750px;
    height: 100%;
    background: #fff;
    border-radius: 5px;
    position: relative;
    left: 0;
    top: 0;
  }

  .main_left .main_left_top>div:nth-child(2) {
    background: #fff;
    width: 495px;
    margin-left: 15px;
    height: 100%;
    border-radius: 5px;
  }

  .main_left .main_left_top>div:nth-child(2)>div {
    padding: 10px;
    width: 100%;
    height: 100%;
    width: 440px;
  }

  .main_left .main_left_top>div:nth-child(2)>div .devNumEcharts {
    width: 440px;
    height: 120px;
    margin: 40px 0px 6px;
    font-size: 18px;
    position: relative;
    display: flex;

    font-size: 12px;
  }

  .main_left .main_left_top>div:nth-child(2)>div .devNumEcharts>div {
    text-align: center;
    line-height: 280px;
    flex: 1;
    margin: 0px;
  }

  .main_left .main_left_top>div:nth-child(2)>div .devNumEcharts>div .sumContainer {
    position: absolute;
    height: 90px;
    padding: 5px;
    border: 2px solid rgb(118, 218, 255);
    top: 50%;
    left: 13%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    overflow: hidden;
  }

  .main_left .main_left_top>div:nth-child(2)>div .devNumEcharts>div .sumContainer .wave {
    width: 60px;
    background-color: rgb(118, 218, 255);
    height: 90px;
    text-align: center;
    line-height: 150px;

    &::before,
    &::after {
      content: "";
      position: absolute;
      width: 140px;
      height: 150px;
      top: 0;
      left: 50%;
      background-color: rgba(255, 255, 255, 0.4);
      border-radius: 45%;
      transform: translate(-50%, -70%) rotate(0);
      animation: rotate 6s linear infinite;
      z-index: 10;
    }

    &::after {
      border-radius: 47%;
      background-color: rgba(255, 255, 255, 0.9);
      transform: translate(-50%, -70%) rotate(0);
      animation: rotate 10s linear -5s infinite;
      z-index: 20;
    }

    @keyframes rotate {
      50% {
        transform: translate(-50%, -73%) rotate(180deg);
      }

      100% {
        transform: translate(-50%, -70%) rotate(360deg);
      }
    }
  }

  .main_left .main_left_top>div:nth-child(1)>img {
    display: inline-block;
    margin: 10px 20px;
    height: 242px;
  }

  .main_left .main_left_top>div:nth-child(1)>div {
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 440px;
    right: 0;
    margin: 0 10px 10px 0;
  }

  .hotelName {
    font-weight: bold;
    color: #1e8281;
    font-size: 17px;
  }

  .buildNum {
    height: 24px;
    margin: 10px 0px 20px 0px;
    font-size: 18px;
  }

  .staffNum>div:nth-child(1)>div {
    display: inline-block;
  }

  .buillogo {
    color: #8b8888;
    position: relative;
    top: -10px;
    width: 120px;
  }

  .buillogo>span {
    margin-left: 10px;
  }

  .buildata>div {
    height: 25px;
    font-size: 14px;
  }

  .devTitle {
    display: flex;
    font-size: 14px;
    width: 100%;
    text-align: center;

    &>div {
      flex: 1;
    }
  }

  .main_left_bottom {
    width: 100%;
    position: relative;
    top: 10px;
    bottom: 0px;
    border-radius: 5px;
    display: flex;
  }

  .nfkt {
    background-color: #fff;
    width: 710px;
    height: 487px;
    padding: 10px 20px;
    border-radius: 5px;
  }

  .form_view_box {
    background-color: #8b8888;
  }

  .biaodian {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #8b8888;
    border-radius: 50%;
    margin-right: 10px;
  }

  .cbxttccxt {
    display: flex;
    justify-content: space-between;
  }

  .cbxttccxt>div {
    background-color: #fff;
    display: inline-block;
    width: 200px;
    height: 122px;
    margin-top: 15px;
    padding: 10px 20px;
    border-radius: 5px;
  }

  .main_right {
    margin-left: 20px;
    width: 400px;
    background-color: #fff;
    border-radius: 5px;
    padding: 10px 20px;
    margin-bottom: 5px;

    &>div>span {
      display: inline-block;
      width: 70px;
      height: 30px;
      line-height: 30px;
      color: #fff;
      margin: 20px 10px 0 0;
      border-radius: 5px;
      text-align: center;
      cursor: pointer;
    }
  }

  .gpsxt {
    background-color: #fff;
    width: 200px;
    height: 279px;
    padding: 10px 20px;
    margin-left: 15px;
    border-radius: 5px;
  }

  .oneline,
  .twoline,
  .threeline {
    display: flex;
  }

  .xiaobox>div {
    width: 200px;
    height: 226px;
    background-color: #fff;
    margin: 0px 0px 0px 15px;
    padding: 10px 20px;
    border-radius: 5px;
  }
  .xiaobox >.boxcopy{
    margin-bottom: 15px;
  }

  .dtgl {
    width: 455px;
    height: 122px;
    background-color: #fff;
    padding: 10px 20px;
    margin-left: 15px;
    border-radius: 5px;
  }

  .dljk {
    width: 200px;
    height: 122px;
    background-color: #fff;
    padding: 10px 20px;
    margin-left: 15px;
    border-radius: 5px;
  }

  .threeline>div {
    width: 200px;
    background-color: #fff;
    height: 122px;
    padding: 10px 20px;
    border-radius: 5px;
    margin: 15px 0px 0 15px;
  }

  .box_content {
    display: flex;
    height: 200px;
  }

  .geipaishui {
    height: 256px;
  }

  .box_content>div:nth-child(1)>img {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }

  .box_content>div:nth-child(2)>div {
    font-size: 14px;

    &>span:nth-child(1) {
      margin: 0 20px 0 20px;
    }
  }

  .box_content>div:nth-child(2) {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }

  .elevator {
    margin-left: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }

  .top_triangle {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 16px solid #007674;
    display: inline-block;
  }

  .below_triangle {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 16px solid #007674;
    display: inline-block;
  }

  .stop1 {
    width: 6px;
    height: 16px;
    display: inline-block;
    background-color: #007674;
  }

  .stop2 {
    width: 6px;
    height: 16px;
    display: inline-block;
    background-color: #007674;
    margin-left: 4px;
  }

  .elevatorspan {
    margin: 0px 40px 0 80px;
  }

  .isActive {
    background: #007674;
  }

  .blurActive {
    background: #acacac;
  }

  .warningInfo {
    /* margin: 20px 20px 0; */
    height: 660px;
    // height: 580px;
    overflow-y: scroll;
    position: relative;
    margin-top: 10px;

    .warningScroll {
      position: absolute;
      width: 100%;
      overflow-y: scroll;
      animation: move 25s linear infinite;

      @keyframes move {
        0% {}

        100% {
          transform: translateY(-50%);
        }
      }

      /* 鼠标经过就停止动画 */
      &:hover {
        overflow-y: scroll;
        animation-play-state: paused;
      }

      &::-webkit-scrollbar {
        width: 0;
      }

      &>.warn_item {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        padding: 8px 10px;
        border: 1px solid #dadada;
        margin: 10px 0;
        border-radius: 5px;
        cursor: pointer;

        &>div {
          height: 38px;
        }
      }
    }

    .warningScroll2 {
      width: 100%;
      overflow-y: scroll;

      &::-webkit-scrollbar {
        width: 0;
      }

      &>.warn_item {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        padding: 8px 10px;
        border: 1px solid #dadada;
        margin: 10px 0;
        border-radius: 5px;
        cursor: pointer;

        &>div {
          height: 38px;
        }
      }
    }
  }

  .warningInfo::-webkit-scrollbar {
    width: 0;
  }

  .warnDetail {
    font-size: 14px;
  }

  .warnDate {
    color: #777777;
    font-size: 13px;
    margin-top: 3px;
  }

  .locationc {
    line-height: 38px;
    font-size: 14px;
  }

  .nfkt>>>.el-table__body-wrapper::-webkit-scrollbar {
    width: 0;
  }
  .companyImg{
    width: 390px;
  }
</style>